<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论列表</title>
    <%- include common %>
    <style>
        table.xheLayout {
            width: 100% !important;
        }
    </style>
</head>
<body>
    <%- include('head', {title: 'mlist', username: username}) %>

    <div class="container-fluid">
        <div class="container">
            <h3 class="text-primary">评论列表</h3>

            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group" >
                        <select class="form-control" data-page="<%- page %>" id="pageSizeSelect" >
                            <option value="2" <%- pageSize == 2 ? 'selected' : '' %> >每条2条</option>
                            <option value="3" <%- pageSize == 3 ? 'selected' : '' %> >每条3条</option>
                            <option value="4" <%- pageSize == 4 ? 'selected' : '' %> >每条4条</option>
                            <option value="5" <%- pageSize == 5 ? 'selected' : '' %> >每条5条</option>
                        </select>
                    </div>
                </div>
            </div>

            <table class="table table-bordered table-hover table-striped table-condensed">
                <thead>
                    <tr class="danger text-center">
                        <td>#</td>
                        <td>评论标题</td>
                        <td style="width: 180px;">评论内容</td>
                        <td>评论人</td>
                        <td>评论时间</td>
                        <td>评论电影</td>
                        <td>电影缩略图</td>
                        <td>操作1</td>
                        <td>操作2</td>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <% if (result.length > 0) { %>
                        <% result.forEach((item, index) => { %>
                            <tr>
                                <td><%- index + 1 %></td>
                                <td>
                                    <a style="display: block;width:100px;word-break: break-all;" href="/comment/cdetail?_id=<%- item._id%>  "> <%- item.title %> </a>
                                </td>
                                <td>
                                    <div style="width:220px;word-break: break-all;overflow: hidden;">
                                        <%- item.content %>
                                    </div>
                                </td>
                                <td>
                                    <a href="/comment/pcommentlist?author=<%-item.author%>" class="<%- item.author == username ? 'text-danger' : '' %>">  <%- item.author %> </a>
                                </td>
                                <td><%- item.time %></td>
                                <td>
                                    <a href="/comment/mcommentlist?mid=<%- item.mid %>"> <%- item.movie.title %> </a>
                                </td>
                                <td>
                                    <img style="width: 120px;" src="<%- item.movie.images.large.replace(/img7/, 'img3') %>" alt="">
                                </td>
                                <td><button data-toggle="modal" data-target="#delbox" onclick="getDelId('<%- item._id %>')" class="btn btn-danger" <%- item.author == username ? '' : 'disabled' %> >删除</button></td>
                                <td>
                                    <% if (item.author == username) { %>
                                        <button data-toggle="modal" data-target="#updatebox" data-item='<%- JSON.stringify(item) %>' onclick="getUpdateData('<%- item %>', this)" class="btn btn-primary">修改</button>
                                    <% } %>
                                </td>
                            </tr>
                        <% }) %>
                        <tr>
                            <td colspan="9">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li class="<%- page <= 1 ? 'disabled' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-1 %>" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li class="<%- page-2 <= 0 ? 'hidden' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-2 %>">  <%- page-2  %></a>
                                        </li>
                                        
                                        <li class="<%- page-1 <= 0 ? 'hidden' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page-1 %>"> <%- page-1 %></a>
                                        </li>
                                        <li>
                                            <a href="/comment/mlist?page=<%- page %>"><%- page %></a>
                                        </li>
                                        <li class="<%- page + 1 > totalPage ? 'hidden' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+1 %>" > <%- page+1 %> </a>
                                        </li>
                                        <li  class="<%- page + 2 > totalPage ? 'hidden' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+2 %>" > <%- page+2 %> </a>
                                        </li>
                                        <li class="<%- page >= totalPage ? 'disabled' : '' %>">
                                            <a href="/comment/mlist?pageSize=<%-pageSize %>&page=<%- page+1 %>" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                        <li>
                                            <p>第 <%- page%> 页 / 共 <%- totalPage %> 页  </p>
                                            <p>每页 <%- pageSize %> 条 / 共 <%- total %> 条  </p>
                                        </li>
                                    </ul>
                                </nav>
                            </td>
                        </tr>
                    <% } else { %>
                        <tr>
                            <td colspan="9">
                                暂无数据
                            </td>
                        </tr>
                    <% } %>
                </tbody>
            </table>
        </div>


        <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除提示</h4>
                </div>
                <div class="modal-body">
                    <p>亲,你确定要删除吗 &hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmdel()">删除</button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


        <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改评论 / <span id="uauthor">  </span></h4>
                </div>
                <div class="modal-body">
                    <div class="form-group" >
                        <label for="title">评论标题</label>
                        <input type="text" name="title" class="form-control" id="updatetitle" placeholder="请输入评论标题">
                    </div>
                    <div class="form-group" style="display: flex;flex-direction: column;">
                        <label for="content">评论内容</label>
                        <textarea rows="10" cols="20" name="content"  class="form-control" id="updatecontent" placeholder="请输入评论内容"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmupdate()">修改</button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>

    <%- include foot %>


    <script>
        $('#pageSizeSelect').on('change', function() {
            console.log($(this).val());
            var page = $(this).attr("data-page")
            location.href = "/comment/mlist?page="+page+"&pageSize="+$(this).val();
        })

        var delId = '';

        function getDelId(id) {
            delId = id
        }

        function confirmdel(){
            console.log(delId);
            $.ajax({
                url: '/comment/delonecomment',
                type: 'POST',
                data: {
                    _id: delId
                },
                success(res){
                    if(res.type){
                        window.location.reload();
                    }
                }
            })
        }

        var updateData = null;
        function getUpdateData(item, that) {
            var data = JSON.parse(that.getAttribute("data-item"));
            // console.log(data);
            updateData = data;
            $("#uauthor").html(data.author);
            $("#updatetitle").val(data.title);
            $("#updatecontent").val(data.content);
        }

        function confirmupdate(){
            $.ajax({
                url: '/comment/updateonecomment',
                type: 'POST',
                data: {
                    _id: updateData._id,
                    title: $("#updatetitle").val(),
                    content: $("#updatecontent").val()
                },
                success(res){
                    if(res.type){
                        window.location.reload();
                    }
                }
            })
        }
    </script>


    <script>
        // $("#content").xheditor(); // 简单的实例化 
        $(pageInit);
        function pageInit(){
            $.extend(XHEDITOR.settings,{shortcuts:{"ctrl+enter":submitForm}});
            // $("#ele").xheditor();
            $("#updatecontent").xheditor({   //初始化 富文件编辑框
                html5Upload:false,
                upMultiple:"1",

                upLinkRrl:"upload.html",
                upLinkExt:"zip,rar,txt",

                upImgUrl:"/comment/uploadImg",   // 图片上传的服务器  POST
                upImgExt:"jpg,jpeg,gif,png",

                upFlashUrl:"upload.php",
                upFlashExt:"swf",

                upMediaUrl:"upload.php",
                upMediaExt:"wmv,avi,wma,mp3,mid"

            });
        };

        function insertUpload(arrMsg){
            console.log(arrMsg);
            var i,msg;
            for(var i=0;i<arrMsg.length;i++){
                msg=arrMsg[i];
                console.log(msg);
                $("#uploadList").append('<option value="'+msg.id+'">'+msg.localname+'</option>')
            }
        };

        function submitForm(){
            $("#frmDemo").submit();
        }

    </script>

</body>
</html>